<template>
  <v-form v-model="valid" ref="myBrandForm">
    <v-text-field v-model="brand.name" label="请输入品牌名称" required :rules="nameRules"/>

    <v-text-field v-model="brand.letter" label="请输入品牌首字母" required :rules="letterRules"/>

    <!-- cascard 是自定义组件 -->
    <v-cascader
      url="/item/category/list"
      multiple
      required
      v-model="brand.categories"
      label="请选择商品分类"/>

    <!-- 上传品牌 Logo 功能【multiple：作用是是否允许多图片上传】 -->
    <v-layout row>
      <v-flex xs3>
        <span style="font-size: 16px; color: #444">品牌 LOGO：</span>
      </v-flex>
      <v-flex>
        <!--<v-upload v-model="brand.image" url="/upload/locImage" :multiple="false" :pic-width="250" :pic-height="90" />-->
        <v-upload v-model="brand.image" url="/upload/image" :multiple="false" :pic-width="250" :pic-height="90" />
      </v-flex>
    </v-layout>

    <v-layout class="my-4" row>
      <v-spacer/>
      <v-btn @click="submit" color="primary">提交</v-btn>
      <v-btn @click="clear">重置</v-btn>
    </v-layout>
  </v-form>
</template>

<script>
  export default {
    name: "brand-form",
    props: {
      oldBrand: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        valid: false,     // 表单校验结果标记
        brand: {
          name: '',       // 品牌名称
          letter: '',     // 品牌首字母
          image: '',      // 品牌logo
          categories: [], // 品牌所属的商品分类数组
        },
        nameRules: [
          v => !!v || "品牌名称不能为空"
        ],
        letterRules: [
          v => !!v || "首字母不能为空",
          v => /^[a-zA-Z]{1}$/.test(v) || "品牌字母只能是1个字母"
        ]
      }
    },
    methods: {
      submit() {
        // 表单校验 $refs 表示获取所有的表单信息，通过打点调取对应的表单；然后通过 validate() 对数据进行校验
        if (this.$refs.myBrandForm.validate()) {
          // 定义一个请求参数对象，通过 “解构表达式” 来获取 brand 中的属性
          const {categories, letter, ...params} = this.brand;
          // 数据库中只要保存分类的 id 即可，因此对 categories 的值进行处理,只保留 id，并转为字符串
          params.cids = categories.map(c => c.id).join(",");
          // 将字母都处理为大写
          params.letter = letter.toUpperCase();
          // 将数据提交到后台
          // this.$http.post('/item/brand', this.$qs.stringify(params))
          this.$http({
            method: this.isEdit ? 'put' : 'post',
            url: '/item/brand',
            data: this.$qs.stringify(params)
          }).then(() => {
            // 关闭窗口【$emit 调用父组件的关闭事件】
            this.$emit("close");
            this.$message.success("保存成功！");
          })
          .catch(() => {
            this.$message.error("保存失败！");
          });
        }
        this.clear();
      },
      clear() {
        // 重置表单
        this.$refs.myBrandForm.reset();
        // 需要手动清空商品分类
        this.categories = [];
      }
    },
    watch: {
      // 监控 oldBrand 的变化
      oldBrand: {
        handler(val) {
          if (val) {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy 属性即可
            this.brand = Object.deepCopy(val)
          } else {
            // 为空，初始化 brand
            this.brand = {
              name: '',
              letter: '',
              image: '',
              categories: [],
            }
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
